<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>创建小说</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    
</head>

<body class="layui-bg-gray">
    <div class="layui-container">
        <div class="layui-row">
            <div class="layui-col-md8 layui-col-lg-offset2" style="margin-top: 40px;">
                <div class="layui-card" style="background:transparent">
                    <div class="layui-card-body">
                        <form class="layui-form layui-form-pane" action="">
                            <div class="layui-form-item" style="margin-top:15px;">
                                <label class="layui-form-label">小说标题</label>
                                <div class="layui-input-block">
                                    <input class="layui-input" type="text" name="username" lay-verify="required"
                                        placeholder="请输入您所创建的小说名" autocomplete="off">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">小说分类</label>
                                <div class="layui-input-block">
                                  <select name="city" lay-verify="required">
                                    <option value=""></option>
                                    <option value="1">玄幻</option>
                                    <option value="4">武侠</option>
                                    <option value="5">都市</option>
                                    <option value="2">仙侠</option>
                                    <option value="3">奇幻</option>
                                    <option value="6">历史</option>
                                    <option value="7">军事</option>
                                    <option value="8">科幻</option>
                                    <option value="9">灵异</option>
                                    <option value="10">体育</option>
                                    <option value="11">言情</option>
                                    <option value="12">穿越</option>
                                  </select>
                                </div>
                              </div>
                            <div class="layui-form-item layui-form-text">
                                <label class="layui-form-label">小说简介</label>
                                <div class="layui-input-block">
                                    <textarea name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>
                                </div>
                            </div>
                            <div class="layui-form-item" style="text-align: center">
                                <a href="" class="layui-btn">下一步</a>
                            </div>
                 
                    </form>

                </div>
            </div>
        </div>
    </div>
    </div>
    <div class="layui-footer" style="text-align: center;height: 60px;">
        <p style="line-height: 60px;color: white;">Copyright © 2019 - Software Technology from 
            <a href="http://www.yngsxy.net/" title="云南工商学院" style="color: white">云南工商学院</a></p>
    </div>

    <script src="layui/layui.js" charset="utf-8"></script>
    <script>
        //Demo
        layui.use('form', function(){
          var form = layui.form;
          
          //监听提交
          form.on('submit(formDemo)', function(data){
            layer.msg(JSON.stringify(data.field));
            return false;
          });
        });
        </script>
</body>

</html>